<style scoped>
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
    }
    .layout-breadcrumb{
        padding: 10px 15px 0;
    }
    .layout-content{
        min-height: 200px;
        margin: 15px;
        overflow: hidden;
        background: #fff;
        border-radius: 4px;
    }
    .layout-content-main{
        padding: 10px;
    }
    .layout-copy{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .layout-menu-left{
        background: #fff;
    }
    .layout-header{
        height: 60px;
        background: #fff;
        box-shadow: 0 1px 1px rgba(0,0,0,.1);
    }
    .layout-logo-left{
        width:100%;
        height: 60px;
        background: #fff;
        border-bottom:1px solid #d5d5d4;
        font-size:16px;
        color:#1b73fb;
        font-weight:500;
        line-height:60px;
        text-indent:1em;
        border-right:1px solid #d5d5d4;

    }

    .Tabs_nav{
        width:100%;
        background-color:#fff;
        height:45px;
    }
    .main{
        height:100%;
        background-color:#eef4ff;
        margin:0 12px 12px 12px;
        min-height:512px;

    }
    .Tabs_ul{
        list-style-type:none;
        width:100%;
        height:35px;
        position:absolute;
        bottom:15px;
        border-bottom:3px solid #70cc10;
    }
    .Tabs_ul li{
        float:left;
        width: 133px;
        height: 35px;
    }
    .Tabs_ul li a{
        width: 133px;
        height: 35px;
        display:block;
        text-align:center;
        color:#fff;
        line-height:35px;
        background:url('../images/label_bg_normal.png') no-repeat left;
    }
    .Tabs_ul li a:hover{
        background-image:url('../images/label_bg_selected.png');
        z-index:100;
        border-bottom:2px solid #70cc10;
    }

    .logo_icon{
        text-indent:6.2em;
    }

</style>
<template>
    <div class="layout">
        <Header-nav></Header-nav>
        <Row type="flex">
            <i-col id="menu_left" span="4" class="layout-menu-left">
                <div class="layout-logo-left">
                        功能菜单
                        <a v-on:click="fns()"><Icon class="logo_icon" size="16" color="#5488ef" type="navicon-round"></Icon></a>
                </div>
            </i-col>
            <i-col span="20" style="background:#eef4ff;">
                <div class="Tabs_nav">
                    <ul class="Tabs_ul">
                        <li><a v-link="{path:'/home/hometable'}" style="margin-left:18px">首页</a></li>
                        <li><a v-link="{path:'/home/maintable'}" style="margin-left:3px">生产管理</a></li>
                        <li><a v-link="{path:'/home/usertable'}" style="margin-left:-10px">用户管理</a></li>
                    </ul>
                </div>
            </i-col>
            <i-col :class="main_left" :span="spanLeft" v-if="xianshi" class="layout-menu-left">
                <Menu active-key="1-2" width="auto">
                    <Submenu key="1" v-for="val in confs.Data" v-if="val.ParentID==''" track-by="$index">
                       <template slot="title">
                            <!-- <Icon v-show="val.IconClass!=''" color="#1b73fb" v-bind:type="menu.IconClass"></Icon> -->
                            {{val.MenuName}}
                        </template>
                        <Menu-item v-for="item in confs.Data" v-if="item.ParentID==val.ID" v-bind:key="item.ID">{{item.MenuName}}</Menu-item>
                    </Submenu>
                    <!-- <Submenu key="2">
                        <template slot="title">
                            <Icon color="#1b73fb" type="android-apps"></Icon>
                            系统管理
                        </template>
                        <Menu-item key="2-1">选项 1</Menu-item>
                        <Menu-item key="2-2">选项 2</Menu-item>
                    </Submenu>
                    <Submenu key="3">
                        <template slot="title">
                            <Icon color="#1b73fb" type="ios-bookmarks"></Icon>
                            基础资料
                        </template>
                        <Menu-item key="3-1">选项 1</Menu-item>
                        <Menu-item key="3-2">选项 2</Menu-item>
                    </Submenu>
                    <Submenu key="4">
                        <template slot="title">
                            <Icon color="#1b73fb" type="android-clipboard"></Icon>
                            业务资料
                        </template>
                        <Menu-item key="1-1">选项 1</Menu-item>
                        <Menu-item key="1-2">选项 2</Menu-item>
                        <Menu-item key="1-3">选项 3</Menu-item>
                    </Submenu>
                    <Submenu key="5">
                        <template slot="title">
                            <Icon color="#1b73fb" type="android-options"></Icon>
                            追溯码管理
                        </template>
                        <Menu-item key="1-1">选项 1</Menu-item>
                        <Menu-item key="1-2">选项 2</Menu-item>
                        <Menu-item key="1-3">选项 3</Menu-item>
                    </Submenu>
                    <Submenu key="6">
                        <template slot="title">
                            <Icon color="#1b73fb" type="android-create"></Icon>
                            用户管理
                        </template>
                        <Menu-item key="1-1">选项 1</Menu-item>
                        <Menu-item key="1-2">选项 2</Menu-item>
                        <Menu-item key="1-3">选项 3</Menu-item>
                    </Submenu>
                    <Submenu key="7">
                        <template slot="title">
                            <Icon color="#1b73fb" type="ios-recording"></Icon>
                            生产管理
                        </template>
                        <Menu-item key="1-1">选项 1</Menu-item>
                        <Menu-item key="1-2">选项 2</Menu-item>
                        <Menu-item key="1-3">选项 3</Menu-item>
                    </Submenu>
                    <Submenu key="8">
                        <template slot="title">
                            <Icon color="#1b73fb" type="ios-toggle"></Icon>
                            授权管理
                        </template>
                        <Menu-item key="1-1">选项 1</Menu-item>
                        <Menu-item key="1-2">选项 2</Menu-item>
                        <Menu-item key="1-3">选项 3</Menu-item>
                    </Submenu> -->
                </Menu>
            </i-col>
            <i-col :span="spanRight" style="background:#eef4ff">
                <div class="main">

                    <router-view>

                    </router-view>
                    <!-- <Home-table></Home-table> -->
                </div>
            </i-col>
        </Row>
    </div>
</template>
<script>
    import HeaderNav from '../components/Header.vue';
    import HomeTable from '../components/HomeTable.vue'
    export default {
        components:{
            HeaderNav,
            HomeTable
        },
        ready(){
            //this.uName = sessionStorage.getItem("name");//获取用户名称
            this.getMenu();
        },
        methods:{
            fns:function(){
                if (this.xianshi==true) {
                    this.xianshi=false;
                    this.spanRight=24;
                    this.spanLeft=0;
                }else{
                    this.xianshi=true;
                    this.spanLeft=4;
                    this.spanRight=20;
                };
            },
            getMenu: function() {
                var User_Key = localStorage.getItem("UserKey");
                alert("1111")
                console.log(User_Key);
                var param = JSON.stringify({

                })
                this.getHttpC("/menu/getall?v=1_13",param)
                    .then(response => {
                        let data = response.body;
                        //console.log(data);
                        //var conf;
                        if (data.Code === "0") {
                            this.confs=data;
                            //把data数据传给confs
                            //console.log(this.confs);
                            //注释部分消耗性能可以弃用
                            // for(var i=0;i<data.Data.length;i++){
                            //     this.menuList = data.Data;//会议列表对象
                            //     conf='{"ID":"'+this.menuList[i].ID+'","menuName":"'+this.menuList[i].MenuName+'","ParentID":"'+this.menuList[i].ParentID+'"}';
                            //     conf=JSON.parse(conf);
                            //     this.confs.push(conf);
                            //     console.log(conf);
                            //     //console.log(this.confs);
                            // }
                        } else {
                            console.log("错误路径");
                            console.log(data.code);
                        }
                    }, (error) => {
                        console.log(error)
                    })
            }
        },
        data () {
            return {
                xianshi:true,
                spanLeft:4,
                spanRight:20,
                confs:[],//菜单列表数据
                menuList:[]//菜单列表对象
            }
        }
    }
</script>
